<template>
    <div class="container_box">
        <div class="content_box flexC">
            <ul class="flex colorF textC font_s20 main_title">
                <li class="flex2">序号</li>
                <li class="flex4">单位名称</li>
                <li class="flex4">业务主管单位</li>
            </ul>
            <ul class="scrollBar" style="height:63.5vh;">
                <li class="flex textC colorF font_s18 main_content" v-for="item in dataList" v-bind:key="item.id">
                    <span class="flex2">{{item.xh}}</span>
                    <span class="flex4">{{item.dwmc}}</span>
                    <span class="flex4">{{item.zgdw}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' },
        { xh: 1, dwmc: '上海市浦东新区未来教育培训中心', zgdw: '上海市浦东新区教育局' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.container_box {
    width: 95%;
    height: 88%;
    margin: 0 auto;
    .content_box {
        padding: 0 3.285rem;
        .main_title {
            background: #2954DA;
            line-height: 2.425rem;
            border-radius: 8px 8px 0 0;
        }
        .main_content {
            background: #1E40AA;
            border-radius: 8px;
            line-height: 3.215rem;
            margin-top: 0.825rem;
        }
    }
    .scrollBar {
        overflow: auto;
    }
    .scrollBar::-webkit-scrollBar {
        width: 8px;
        border-radius: 10px;
        background-color: rgba($color: #ffffff, $alpha: 0.6)
    }
    .scrollBar::-webkit-scrollBar-thumb {
        border-radius: 10px;
        background-color: rgba($color: #3659f3, $alpha: 0.8)
    }
}
</style>
